<template>
  <embed
    ref="pdfViewer"
    src=""
    type="application/pdf"
    :width="width * 0.7 + 10 + 'px'"
    :style="{ height: height * 0.7 + 10 + 'px' }"
  />
  <canvas ref="canvasRef"></canvas>
  <div ref="picContainer"></div>
</template>
<script setup lang="ts">
import jsPDF from 'jspdf'
import { onMounted, useTemplateRef } from 'vue'
import '@/assets/fonts/MicrosoftYaHeiUI-02-normal.js'
import '@/assets/fonts/fang-song-normal.js'
const height = 1123
const width = 794
const text = '你好，世界！'
const fontStyle = '120px sim-fangsong'
const ref = useTemplateRef('pdfViewer')
const canvasRef = useTemplateRef('canvasRef')
const picContainer = useTemplateRef('picContainer')
const fakeCanvas = document.createElement('canvas')
const fakeCtx = fakeCanvas.getContext('2d')!

const genPdf = () => {
  const pdf = new jsPDF({
    orientation: 'p',
    unit: 'px',
    format: [width, height],
    hotfixes: ['px_scaling'],
    compress: true,
  })
  window.pdf = pdf
  const ctx = pdf.context2d
  ctx.font = fontStyle
  ctx.fillStyle = '#5bd812'

  fakeCtx.font = fontStyle
  const oriTextM = fakeCtx.measureText(text)

  const rotatedTextWidth = oriTextM.width * Math.sin(45)
  const rotatedTextOffset = oriTextM.actualBoundingBoxAscent * Math.sin(45)
  const tx = (width - rotatedTextWidth) / 2 + rotatedTextOffset
  const ty = (height - rotatedTextWidth) / 2 + rotatedTextWidth - rotatedTextOffset / 2
  pdf.line(0, 0, width / 2, height / 2)
  pdf.line(0, height / 2, width, height / 2)
  pdf.line(tx, 0, tx, height)
  pdf.line(width - tx, 0, width - tx, height)
  pdf.line(0, ty, width, ty)
  pdf.line(0, height - ty, width, height - ty)
  pdf.saveGraphicsState()
  pdf.setGState(pdf.GState({ opacity: 0.3 }))
  ctx.fillStyle = '#d81212'
  // const t = pdf.Matrix(1.0, 0.0, 0.0, 1.0, (width/2)/(96/72), -(height/2) / (96 / 72))
  // pdf.setCurrentTransformationMatrix(t)
  pdf.text(text, tx, ty, undefined, 45)
  pdf.restoreGraphicsState()

  const svg =
    '<svg\n' +
    '      xmlns="http://www.w3.org/2000/svg"\n' +
    '      width="101.25" height="25"\n' +
    '      fill="#fff" stroke="black" stroke-width="1"\n' +
    '      stroke-linecap="round" stroke-linejoin="round"\n' +
    '    ><path d="M5.63 2.5 1.88 15.63 M6.25 2.5 2.5 15.63 M8.75 6.25 7.5 11.25 M3.75 2.5 13.13 2.5 12.5 6.25 12.5 2.5 M4.38 8.75 8.13 8.75 M0 15.63 9.38 15.63 10.63 12.5 8.75 15.63 M16.88 16.25 15 22.81 M17.19 16.25 15.31 22.81 M19.38 18.75 19.06 19.06 19.38 19.38 19.69 19.06 19.69 18.75 19.38 18.44 19.06 18.44 18.44 18.75 17.19 20 16.56 20.31 15.94 20.31 M16.56 20.31 17.19 20.63 17.81 22.5 18.13 22.81 M16.56 20.31 16.88 20.63 17.5 22.5 17.81 22.81 18.44 22.81 19.06 22.5 19.69 21.56 M15.94 16.25 17.19 16.25 M23.13 8.13 34.38 8.13 M23.13 11.88 34.38 11.88 M41.88 2.5 38.13 15.63 M42.5 2.5 38.75 15.63 M40 11.25 41.25 8.75 42.5 7.5 43.75 6.88 45 6.88 46.25 7.5 46.88 8.13 46.88 9.38 45.63 13.13 45.63 15 46.25 15.63 M45 6.88 46.25 8.13 46.25 9.38 45 13.13 45 15 45.63 15.63 47.5 15.63 48.75 14.38 49.38 13.13 M40 2.5 42.5 2.5 M50.63 9.38 51.25 8.13 52.5 6.88 54.38 6.88 55 7.5 55 9.38 53.75 13.13 53.75 14.38 55 15.63 M53.75 6.88 54.38 7.5 54.38 9.38 53.13 13.13 53.13 14.38 53.75 15 55 15.63 55.63 15.63 57.5 15 58.75 13.75 60 11.88 60.63 9.38 60.63 6.88 60 6.88 60.63 8.13 M65 10 76.25 10 M83.75 2.5 82.5 15.63 M84.38 2.5 83.13 14.38 M88.75 2.5 82.5 15.63 M88.75 2.5 87.5 15.63 M89.38 2.5 88.13 14.38 M93.75 2.5 87.5 15.63 M81.88 2.5 86.25 2.5 M91.88 2.5 95.63 2.5 M97.81 16.25 96.88 16.56 96.25 17.5 95.94 19.06 95.94 20 96.25 21.56 96.88 22.5 97.81 22.81 98.44 22.81 99.38 22.5 100 21.56 100.31 20 100.31 19.06 100 17.5 99.38 16.56 98.44 16.25 97.81 16.25 M97.81 16.25 97.19 16.56 96.88 16.88 96.56 17.5 96.25 19.06 96.25 20 96.56 21.56 96.88 22.19 97.19 22.5 97.81 22.81 M98.44 22.81 99.06 22.5 99.38 22.19 99.69 21.56 100 20 100 19.06 99.69 17.5 99.38 16.88 99.06 16.56 98.44 16.25 "/></svg>'
  pdf.addSvgAsImage(svg, 0, 0, 400, 200, '', false)
  // setTimeout(() => {
  //   ref.value!.src = pdf.output('datauristring') + '#zoom=70&toolbar=0'
  // }, 2000)
  const img = new Image()
  img.onload = (e) => {
    console.log(canvasRef.value)
    canvasRef.value!.width = 100
    canvasRef.value!.height = 25
    const ctx = canvasRef.value!.getContext('2d')!
    ctx.clearRect(0, 0, 100, 25)
    // ctx.fillStyle = '#ffffff'
    // ctx.fillRect(0, 0, 100, 25)
    ctx.drawImage(img, 0, 0, 100, 25)
    const data = canvasRef.value!.toDataURL('image/png')
    console.log(data)
    pdf.addImage(data, 0, 450, 100, 25)
    setTimeout(() => {
      ref.value!.src = pdf.output('datauristring') + '#zoom=70&toolbar=0'
    }, 100)
    picContainer.value!.append(img)
  }
  img.src = 'data:image/svg+xml;base64,' + btoa(svg)
}

onMounted(() => {
  genPdf()
})
</script>
<style scoped lang="scss"></style>
